<template>
    <div class="edit-img" @click="updateImg">
        <figure>
            <span>
                <i-icon class="icon-camera" type="camera"></i-icon>
            </span>
            <img :src="src" alt="" v-if="src">
            <img :src="defaultImg" alt="" v-else/>
        </figure>
    </div>
</template>
<script>
// mapActions
import { mapActions } from 'vuex'

export default {
    name: 'edit-img',
    props: ['src', 'modulesIndex', 'listIndex'],
    data() {
        return {}
    },
    computed: {
        defaultImg() {
            return require('@/assets/images/default_img.jpg')
        }
    },
    methods: {
        ...mapActions(['isModal']),
        /**
         * 修改图片
         */
        updateImg() {
            this.isModal({
                bShow: true,
                modalKey: 'bPictureModal',
                limit: 1,
                changeInfo: {
                    page: 'viusal',
                    type: 'updateImage',
                    attr: 'list',
                    modulesIndex: this.modulesIndex,
                    listIndex: this.listIndex
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.edit-img {
    width: 76px;
    height: 76px;
    border: 1px solid @border-color-split;
    position: relative;
    padding: 2px;
    &:hover {
        span {
            display: flex;
        }
    }
    figure {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .icon-camera {
        font-size: 42px;
        color: rgba(255, 255, 255, 0.84);
    }
    span {
        display: none;
        align-items: center;
        justify-content: center;
        position: absolute;
        cursor: pointer;
        left: 2px;
        top: 2px;
        bottom: 2px;
        right: 2px;
        background: rgba(2px, 0, 0, 0.2);
    }
    img {
        max-height: 100%;
        max-width: 100%;
    }
}
</style>


